<!--放大镜组件-->
<template>
  <div class="zoom l">
    <div class="zoom_top">
      <img
        :src="require(`@/assets/img/productDetail/${currentActive}.jpg`)"
        alt=""
        style="width: 100%"
      />
      <div class="mask" v-show="maskShow" :style="topStyle"></div>
      <div
        class="maskTop"
        @mouseover="bigShow()"
        @mouseout="bigLeave()"
        @mousemove="move($event)"
      ></div>
      <div class="big" v-show="isShow">
        <img
          :src="require(`@/assets/img/productDetail/${currentActive}.jpg`)"
          alt=""
          style="width: 165%"
          :style="r_img"
        />
      </div>
    </div>
    <div class="zoom_bottom">
      <div v-for="(item, index) in imgSS" :key="index">
        <img
          :class="{ Active: index == currentActive }"
          :src="require(`@/assets/img/productDetail/${index}.jpg`)"
          alt=""
          style="width: 100%"
          @mouseenter="pdEnter(index)"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'zoom',
  data() {
    return {
      text0: [0, 1, 1, 11, 25], //用于测试
      text: [1, 1, 1, 1, 1, 1], //用于测试
      imgSS: [
        0,
        1,
        2,
        3,
        4 //用于测试
      ],
      currentActive: 0,
      r_img: {},
      isShow: 0,
      maskShow: 0,
      topStyle: {}
      // currentX: 0,
      // currentY: 0,
    }
  },
  methods: {
    //鼠标经过图片，显示详细图片以及小图片出现边框
    pdEnter(index) {
      this.currentActive = index
    },
    bigShow() {
      this.isShow = !this.isShow
      this.maskShow = !this.maskShow
    },
    bigLeave() {
      this.isShow = !this.isShow
      this.maskShow = !this.maskShow
    },
    move($event) {
      let x = event.offsetX
      let y = event.offsetY
      let topX = x - 100 < 0 ? 0 : x - 100
      let topY = y - 100 < 0 ? 0 : y - 100
      if (topX > 200) {
        topX = 200
      }
      if (topY > 200) {
        topY = 200
      }
      // this.currentX = X;
      // this.currentY = Y;
      // console.log(this.currentX);
      this.topStyle.transform = `translate(${topX}px,${topY}px)`
      this.r_img.transform = `translate(-${(518 / 380) * topX}px,-${
        (500 / 380) * topY
      }px)`
    }
  }
}
</script>

<style>
/* 放大镜效果 */

/* 一个全部的遮罩层，此处用于（冒泡作用）？？待懂 */
.maskTop {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  cursor: move;
}
/* 黄色遮罩 */
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-color: yellow;
  border: 1px solid #ccc;
  /* 半透明 */
  opacity: 0.5;
}
/* 放大的图片 */
.big {
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 2;
  width: 132%;
  height: 132%;
  background-color: #fff;
  overflow: hidden;
}
.zoom {
  width: 100%;
  height: 100%;
}
.zoom_top {
  position: relative;
  width: 100%;
  height: 74%;
}
.zoom_bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  height: 12%;
}
.zoom_bottom div {
  width: 16.5%;
  height: 12%;
}
.zoom_bottom img {
  width: 16.5%;
}
/* 动态选择图片 */
.Active {
  border: 1px solid rgb(239, 31, 31);
}
</style>
